<template>
	<view class="store-setting">
		<view class="store-cell-group">
			<view class="store-cell">
				<view class="store-cell-tit">店铺LOGO</view>
				<view class="store-cell-input" @click="chooseImg(1)">
					<text v-if="!form.store_logo">点击上传</text>
					<image :src="form.store_logo" v-else></image>
				</view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<view class="store-cell">
				<view class="store-cell-tit">店铺名称</view>
				<view class="store-cell-input"><input type="text" placeholder="店铺名称" v-model="form.store_name"/></view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<!-- <view class="store-cell">
				<view class="store-cell-tit">
					价格体系
					<text style="display: block; font-size: 20rpx; color: red;">0.7-2.5,默认:1</text>
				</view>
				<view class="store-cell-input"><input type="digit" placeholder="0.7-2.5" v-model="form.coefficient" /></view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view> -->
			<view class="store-cell">
				<view class="store-cell-tit">客服微信二维码</view>
				<view class="store-cell-input" @click="chooseImg(2)">
					<text v-if="!store_service_code">点击上传</text>
					<image :src="store_service_code" class="qrcode" mode="aspectFit" v-else></image>
				</view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<view class="store-cell">
				<view class="store-cell-tit">客服联系电话</view>
				<view class="store-cell-input"><input type="number" placeholder="客服联系电话" v-model="store_service_phone"/></view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<!-- <view class="store-cell">
				<view class="store-cell-tit">店铺类型</view>
				<view class="store-cell-input">
					<picker :range="typeList" @change="selectType">
						<text v-if="!form.type">请选择</text>
						<view style="color: #333;" v-else>{{typeList[form.type-1]}}</view>
					</picker>
				</view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<view class="store-cell">
				<view class="store-cell-tit">店铺背景(店招)</view>
				<view class="store-cell-input" @click="chooseImg(3)">
					<text v-if="!form.backgroundimg">请选择(比例2:1)</text>
					<image :src="form.backgroundimg" class="bg" mode="aspectFill" v-else></image>
				</view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view> -->
			<view class="store-cell">
				<view class="store-cell-tit">店铺所在地区</view>
				<view class="store-cell-input"  @click="selectRegion">
					<text v-if="!region">请选择所在地区</text>
					<view style="color: #333;" v-else>{{region}}</view>
				</view>
				<view class="store-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<view class="store-cell store-des">
				<view class="store-cell-tit">店铺详细地址</view>
				<view class="store-cell-input"><textarea type="text" placeholder="店铺详细地址" v-model="form.address" :cursor-spacing="20"/></view>
			</view>
			<!-- <view class="store-cell store-des">
				<view class="store-cell-tit">店铺简介</view>
				<view class="store-cell-input"><textarea type="text" placeholder="店铺简介" v-model="form.brief" :cursor-spacing="20"/></view>
			</view>
			<view class="store-cell" style="display: block;">
				<view class="store-cell-tit">店铺图片</view>
				<view class="piclist-box">
					<view class="showimg" v-for="(data,index) in imgList" :key="index" v-if="imgList.length">
						<image class="close" src="https://master.shengejiaju.cn/web/static/icons/ico_close@2x_white.png" @click="delVice(data.id,index)"></image>
						<image class="pic" :src="data.url" mode="aspectFit" @click="previewViceImg(index)"></image>
					</view>
					<view @click="addShop" v-if="imgList.length < 3 "><image src="https://master.shengejiaju.cn/web/static/icons/ico_ad_pic02.png"></image></view>
				</view>
			</view>
			<view class="store-cell" style="display: block;">
				<view class="store-cell-tit">是否显示商户主页</view>
				<view class="store-cell-input" style="text-align: left; margin: 20rpx 0 0;">
					<radio-group @change="isShowHome">
						<radio value="1" :checked="form.show_home==1" color="#2073F5" style="margin-right: 20rpx;">开</radio>
						<radio value="2" :checked="form.show_home==2" color="#2073F5" style="margin-right: 20rpx;">关</radio>
						<radio value="3" :checked="form.show_home==3" color="#2073F5">只对自己开放</radio>
					</radio-group>
				</view>
			</view>
			<view class="store-cell" style="display: block;">
				<view class="store-cell-tit">是否把商户主页设为首页</view>
				<view class="store-cell-input" style="text-align: left; margin: 20rpx 0 0;">
					<radio-group @change="isShow">
						<radio value="2" :checked="form.is_show==2" color="#2073F5" style="margin-right: 20rpx;">开</radio>
						<radio value="1" :checked="form.is_show==1" color="#2073F5" style="margin-right: 20rpx;">关</radio>
					</radio-group>
				</view>
			</view>
			<view class="store-cell" style="display: block;" v-if="form.is_show==2">
				<view class="store-cell-tit">是否关闭商城栏目</view>
				<view class="store-cell-input" style="text-align: left; margin: 20rpx 0 0;">
					<radio-group @change="isOpen">
						<radio value="1" :checked="form.is_open==1" color="#2073F5" style="margin-right: 20rpx;">是</radio>
						<radio value="0" :checked="form.is_open==0" color="#2073F5" style="margin-right: 20rpx;">否</radio>
					</radio-group>
				</view>
			</view>
			<view class="store-cell" style="display: block;">
				<view class="store-cell-tit">是否展示品牌</view>
				<view class="store-cell-input" style="text-align: left; margin: 20rpx 0 0;">
					<radio-group @change="isShowFactory">
						<radio value="1" :checked="form.show_factory==1" color="#2073F5" style="margin-right: 20rpx;">是</radio>
						<radio value="2" :checked="form.show_factory==2" color="#2073F5" style="margin-right: 20rpx;">否</radio>
					</radio-group>
				</view>
			</view>
			<view class="store-cell" style="display: block;">
				<view class="store-cell-tit">是否开启秒杀模块</view>
				<view class="store-cell-input" style="text-align: left; margin: 20rpx 0 0;">
					<radio-group @change="isShowKill">
						<radio value="1" :checked="form.show_kill==1" color="#2073F5" style="margin-right: 20rpx;">是</radio>
						<radio value="2" :checked="form.show_kill==2" color="#2073F5" style="margin-right: 20rpx;">否</radio>
					</radio-group>
				</view>
			</view> -->
		</view>
		<view class="store-btns"><button type="primary" @click="submit">保存</button></view>
		
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" cancelColor="#666" confirmColor="#2073F5"></simple-address>
		
	</view>
</template>

<script>
	const md5 = require('../../static/utils/md5')
	import host from '@/api/config.js'
	export default {
		data() {
			return {
				typeList: ['普通商户','装饰公司','定制企业'],
				uploadParameter: {},
				code: '',
				bg: '',
				imgList: [],
				store_service_code: '',
				store_service_phone: '',
				form: {
					store_logo: '',
					store_name: '',
					// coefficient: 1,
					address: '',
					service_code: '',
					service_phone: '',
					province: '',
					city: '',
					area: '',
					type: '',
					// brief: '',
					// backgroundimg: '',
					// show_home: 2,
					// is_show: 1,
					// is_open: 0,
					// show_factory: 2,
					// show_kill: 0,
				},
				region: '',
				cityPickerValueDefault: [0, 0, 0],
				notice: false
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			// 参数排序
			objKeySort(obj) {
				var newkey = Object.keys(obj).sort();
				var newObj = {};
				for (var i = 0; i < newkey.length; i++) {
						newObj[newkey[i]] = obj[newkey[i]];
				}
				return newObj;
			},
			init(){
				let data = {}
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == "micromessenger") {
					data.port = 'wechat'
				}else{
					data.port = 'h5'
				}
				// #endif
				
				// #ifdef APP-PLUS
				switch(uni.getSystemInfoSync().platform){
					case 'android':
						data.port = 'android'
					  break;
					case 'ios':
						data.port = 'ios'
					  break;
				}
				// #endif
				
				data.key = JSON.parse(uni.getStorageSync('userInfo')).token
				
				data.timestamp = Math.round(new Date() * 1000)
				// 获取签名开始
				let obj = 'jjds2020+'
				let newObj = this.objKeySort(data)
				for (let i in newObj){
					obj += i + '=' + newObj[i] +'&'
				}
				obj = obj.substring(0, obj.length - 1)
				obj += '+jjds2020'
				obj = md5.hexMD5(obj)
				obj = obj.toUpperCase()
				// 获取签名结束
				data.sign = obj
				this.uploadParameter = data
				this.$api.StoreDetail({paramter: 1,store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id}).then(res => {
					let storeInfo = res.datas[0]
					if(storeInfo.store_img && storeInfo.store_img.length){
						storeInfo.store_img.forEach(item => {
							this.imgList.push({
								id: item.store_img_id,
								url: item.image
							})
						})
					}
					this.store_service_code = storeInfo.store_service_code?storeInfo.store_service_code:''
					this.store_service_phone = storeInfo.store_service_phone?storeInfo.store_service_phone:''
					this.form = {
						store_id: storeInfo.store_id,
						store_logo: storeInfo.store_logo?storeInfo.store_logo:'',
						store_name: storeInfo.store_name?storeInfo.store_name:'',
						address: storeInfo.address?storeInfo.address:'',
						service_code: storeInfo.store_service_code,
						service_phone: storeInfo.store_service_phone?storeInfo.store_service_phone:'',
						type: storeInfo.type,
						// brief: storeInfo.brief?storeInfo.brief:'',
						// backgroundimg: storeInfo.backgroundimg?storeInfo.backgroundimg:'',
						// show_home: storeInfo.show_home,
						// coefficient: storeInfo.coefficient,
						// is_show: storeInfo.is_show,
						// is_open: storeInfo.is_open,
						province: storeInfo.province,
						city: storeInfo.city,
						area: storeInfo.area,
						// show_factory: storeInfo.show_factory,
						// show_kill: storeInfo.show_kill,
					}
					this.region = storeInfo.province_name + ','+ storeInfo.city_name + ',' + storeInfo.area_name
					let index = this.$refs.simpleAddress.queryIndex([storeInfo.province, storeInfo.city, storeInfo.area], 'value');
					this.cityPickerValueDefault = index.index
				})
			},
			// 图片上传
			chooseImg(type){
				let _this = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album','camera'],
					success(res) {
						let imgs = []
						res.tempFiles.forEach(item => {
							imgs.push({
								uri: item.path
							})
						})
						uni.uploadFile({
							url: `${host}/api/Upimg/UpImg`,
							filePath: imgs[0].uri,
							name: 'file',
							formData: {
								port: _this.uploadParameter.port,
								key: _this.uploadParameter.key,
								timestamp: _this.uploadParameter.timestamp,
								sign: _this.uploadParameter.sign
							},
							success: (uploadFileRes) => {
								if(JSON.parse(uploadFileRes.data).datas[0].indexOf('https') < 0){
									uni.showToast({
										icon: 'none',
										title: JSON.parse(uploadFileRes.data).datas[0]
									})
									return false
								}
								if(type==1){
									_this.form.store_logo = JSON.parse(uploadFileRes.data).datas[0]
								}else if(type==2){
									_this.store_service_code = JSON.parse(uploadFileRes.data).datas[0]
									_this.form.service_code = JSON.parse(uploadFileRes.data).datas[0]
								}else if(type==3){
									_this.form.backgroundimg = JSON.parse(uploadFileRes.data).datas[0]
								}
							}
						});
					}
				})
			},
			// 选择店铺类型
			selectType(e){
				switch (Number(e.detail.value)){
					case 0:
						this.form.type = 1
						break;
					case 1:
						this.form.type = 2
						break;
					case 2:
						this.form.type = 3
						break;
				}
			},
			// 上传店铺图
			addShop(){
				let _this = this
				uni.chooseImage({
					count: 3,
					sourceType: ['album','camera'],
					success(res) {
						let url = ''
						let formData = {}
						url = `${host}/api/Store/AddGoodsImg`
						formData = {
							type: 1,
							port: _this.uploadParameter.port,
							key: _this.uploadParameter.key,
							timestamp: _this.uploadParameter.timestamp,
							sign: _this.uploadParameter.sign,
							store_id: JSON.parse(uni.getStorageSync('userInfo')).store_id
						}
						res.tempFilePaths.forEach((item,index) => {
							uni.uploadFile({
								url: url,
								filePath: item,
								name: 'file',
								formData: formData,
								success: (uploadFileRes) => {
									_this.imgList.push({
										id: JSON.parse(uploadFileRes.data).datas[0].image_id,
										url: JSON.parse(uploadFileRes.data).datas[0].imgUrl
									})
								}
							});
						})
					}
				})
			},
			// 店铺图预览
			previewViceImg(index){
				let arr = []
				this.imgList.forEach(item => {
					arr.push(item.url)
				})
				uni.previewImage({
					current: index,
					urls: arr
				})
			},
			// 移除店铺图
			delVice(id,index){
				this.imgList.splice(index,1)
				if(this.form.store_id){
					this.$api.StoreDelGoodsImg({store_img_id: id}).then(res => {
						uni.showToast({
							icon: 'none',
							title: '删除成功',
							duration: 1500
						})
					})
				}
			},
			// 保存店铺信息
			submit(){
				// if(this.form.coefficient){
				// 	if(this.form.coefficient < 0.7 || this.form.coefficient > 2.5){
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: '价格系数在0.7-2.5之间',
				// 			duration: 1500
				// 		})
				// 		return false
				// 	}
				// }
				// if(!this.form.coefficient){
				// 	this.form.coefficient = 1
				// }
				this.form.service_code = this.store_service_code
				this.form.service_phone = this.store_service_phone
				this.$api.StoreUp(this.form).then(res => {
					uni.showToast({
						icon: 'none',
						title: '保存成功',
						duration: 1500
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					},1500)
				})
			},
			isShowHome(e){
				this.form.show_home = e.detail.value
			},
			isShow(e){
				this.form.is_show = e.detail.value
				if(e.detail.value==1){
					this.form.is_open = 0
				}
			},
			isOpen(e){
				this.form.is_open = e.detail.value
			},
			isShowFactory(e){
				this.form.show_factory = e.detail.value
			},
			isShowKill(e){
				this.form.show_kill = e.detail.value
			},
			onConfirm(e){
				this.form.province = e.provinceCode
				this.form.city = e.cityCode
				this.form.area = e.areaCode
				this.region = e.labelArr.join(',')
			},
			selectRegion(){
				this.$refs.simpleAddress.open();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-setting{
		padding-top: 20rpx;
	}
	.store-cell{
		display: flex;
		align-items: center;
		background-color: #FFF;
		border-bottom: solid 1px #EEE;
		padding: 40rpx 20rpx;
		.piclist-box{
			flex: 1;
			margin-top: 20rpx;
			margin-bottom: -20rpx;
			view{
				display: inline-block;
				vertical-align: top;
				&.showimg{
					position: relative;
					image.close{
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						z-index: 1;
						border: solid 1px red;
						border-radius: 50%;
						background-color: red;
						right: 10rpx;
						top: 10rpx;
					}
					image.pic{
						background-color: #EEE;
						vertical-align: top;
					}
					.piclist-box-tit{
						position: absolute;
						bottom: 30rpx;
						left: 0;
						right: 20rpx;
						color: #FFF;
						background-color: rgba(0,0,0,.5);
						font-size: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						padding: 5rpx;
					}
				}
			}
			image{
				width: 200rpx;
				height: 200rpx;
				margin: 0 20rpx 20rpx 0;
				vertical-align: top;
			}
		}
		&.store-des{
			display: block;
			text-align: left;
			.store-cell-input{
				margin: 30rpx 0 0;
				min-width: 0;
			}
			textarea{
				width: 100%;
				background-color: #F3F3F3;
				border-radius: 10rpx;
				padding: 20rpx;
				line-height: 50rpx;
				text-align: left;
				vertical-align: top;
				box-sizing: border-box !important;
				min-height: 180rpx;
				font-size: 32rpx;
			}
		}
		&:last-child{
			border-bottom: none;
		}
		.store-cell-tit{
			font-size: 32rpx;
		}
		.store-cell-input{
			flex: 1;
			margin: 0 20rpx;
			text-align: right;
			color: #888;
			font-size: 32rpx;
			.switch{
				transform: scale(0.8);
			}
			&.active{
				color: #333;
			}
			input{
				text-align: right;
				color: #333;
				font-size: 32rpx;
			}
			image{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #EEE;
			}
			image.qrcode{
				border-radius: 0;
			}
			image.bg{
				width: 200rpx;
				border-radius: 0;
			}
		}
		.store-cell-switch{
			flex: 1;
			text-align: right;
		}
		.store-cell-arrow{
			image{
				width: 12rpx;
				height: 20rpx;
			}
		}
	}
	.store-btns{
		padding: 50rpx 75rpx;
		button{
			background-color: #2073F5;
			border-radius: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
		}
	}
</style>